<template>
  <view>
    <template v-if="list && list.length > 0">
      <view class="relation-item" v-for="(item, index) in list" :key="index">
        <u-section class="section" :title="`序号${index + 1}`" :right="false">
          <u-button @click="deleteRelation(item)" class="u-m-r-40" size="mini" type="error" slot="right">删除</u-button>
        </u-section>
        <u-cell-group>
          <u-cell-item :arrow="false" title="渠道" :value="item.Channel"></u-cell-item>
          <u-cell-item :arrow="false" title="品牌" :value="item.BrandName"></u-cell-item>
          <u-cell-item :arrow="false" title="事业部总监">
            <u-input
              placeholder="事业部总监"
              :value="item.DealerDivisionName"
              @click="item.showDealerDivisionPicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showDealerDivisionPicker"
            ></u-input>
          </u-cell-item>
          <u-cell-item :arrow="false" title="大区总监">
            <u-input
              placeholder="大区总监"
              :value="item.RegionalDirectorName"
              @click="item.showRegionalDirectorPicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showRegionalDirectorPicker"
            ></u-input>
          </u-cell-item>
          <u-cell-item :arrow="false" title="总监">
            <u-input
              placeholder="团队负责人"
              :value="item.DirectorName"
              @click="item.showDirectorPicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.DirectorPicker"
            ></u-input>
          </u-cell-item>
          <!-- <u-cell-item :arrow="false" title="团队负责人">
            <u-input
              placeholder="团队负责人"
              :value="item.TeamLeaderName"
              @click="item.showTeamPicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showTeamPicker"
            ></u-input>
          </u-cell-item> -->
          <u-cell-item :arrow="false" title="销售经理">
            <u-input
              placeholder="销售经理"
              :value="item.SalseManagerName"
              @click="item.showSalsePicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showSalsePicker"
            ></u-input>
          </u-cell-item>
          <u-cell-item :arrow="false" title="城市高级市场经理">
            <u-input
              placeholder="城市高级市场经理"
              :value="item.SeniorDealerTerminalName"
              @click="item.showSeniorDealerTerminalPicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showSeniorDealerTerminalPicker"
            ></u-input>
          </u-cell-item>
          <u-cell-item :arrow="false" title="城市经理">
            <u-input
              placeholder="城市经理"
              :value="item.DealerTerminalName"
              @click="item.showDealerTerminalPicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showDealerTerminalPicker"
            ></u-input>
          </u-cell-item>
          <u-cell-item :border-bottom="false" :arrow="false" title="售后服务经理">
            <u-input
              placeholder="售后服务经理"
              :value="item.SalesServiceName"
              @click="item.showSalesServicePicker = true"
              inputAlign="right"
              type="select"
              :selectOpen="item.showSalesServicePicker"
            ></u-input>
          </u-cell-item>
        </u-cell-group>

        <u-select
          @confirm="onPickerChange($event, item, 'DirectorList', 'DirectorManagerId', 'DirectorName', 'directorIndex')"
          :safe-area-inset-bottom="true"
          :default-value="[item.directorIndex]"
          v-model="item.showDirectorPicker"
          :list="metadata && metadata.DirectorList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="onPickerChange($event, item, 'SalseList', 'SalseManagerId', 'SalseManagerName', 'salseIndex')"
          :safe-area-inset-bottom="true"
          :default-value="[item.salseIndex]"
          v-model="item.showSalsePicker"
          :list="metadata && metadata.SalseList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="
            onPickerChange(
              $event,
              item,
              'DealerTerminalList',
              'DealerTerminalManagerId',
              'DealerTerminalName',
              'dealerTerminalIndex'
            )
          "
          :safe-area-inset-bottom="true"
          :default-value="[item.dealerTerminalIndex]"
          v-model="item.showDealerTerminalPicker"
          :list="metadata && metadata.DealerTerminalList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="onPickerChange($event, item, 'TeamList', 'TeamLeaderManagerId', 'TeamLeaderName', 'teamIndex')"
          :safe-area-inset-bottom="true"
          :default-value="[item.teamIndex]"
          v-model="item.showTeamPicker"
          :list="metadata && metadata.TeamList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="
            onPickerChange(
              $event,
              item,
              'SeniorDealerTerminalList',
              'SeniorDealerTerminalManagerId',
              'SeniorDealerTerminalName',
              'seniorDealerTerminalIndex'
            )
          "
          :safe-area-inset-bottom="true"
          :default-value="[item.seniorDealerTerminalIndex]"
          v-model="item.showSeniorDealerTerminalPicker"
          :list="metadata && metadata.SeniorDealerTerminalList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="
            onPickerChange(
              $event,
              item,
              'DealerDivisionList',
              'DealerDivisionManagerId',
              'DealerDivisionName',
              'dealerDivisionIndex'
            )
          "
          :safe-area-inset-bottom="true"
          :default-value="[item.dealerDivisionIndex]"
          v-model="item.showDealerDivisionPicker"
          :list="metadata && metadata.DealerDivisionList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="
            onPickerChange(
              $event,
              item,
              'RegionalDirectorList',
              'RegionalDirectorManagerId',
              'RegionalDirectorName',
              'regionalDirectorIndex'
            )
          "
          :safe-area-inset-bottom="true"
          v-model="item.showRegionalDirectorPicker"
          :default-value="[item.regionalDirectorIndex]"
          :list="metadata && metadata.RegionalDirectorList"
          label-name="Value"
          value-name="Key"
        ></u-select>
        <u-select
          @confirm="
            onPickerChange(
              $event,
              item,
              'SalesServiceList',
              'SalesServiceManagerId',
              'SalesServiceName',
              'salesServiceIndex'
            )
          "
          :safe-area-inset-bottom="true"
          :default-value="[item.salesServiceIndex]"
          v-model="item.showSalesServicePicker"
          :list="metadata && metadata.SalesServiceList"
          label-name="Value"
          value-name="Key"
        ></u-select>
      </view>
    </template>

    <u-empty v-else></u-empty>
  </view>
</template>

<script>
export default {
  name: 'relations-form',
  props: {
    showDeleteBtn: {
      type: Boolean,
      default: false
    },
    metadata: {
      type: Object,
      default() {
        return {
          DirectorList: [],
          SalseList: [],
          DealerTerminalList: [],
          TeamList: [],
          SeniorDealerTerminalList: [],
          DealerDivisionList: [],
          RegionalDirectorList: [],
          SalesServiceList: []
        };
      }
    }
  },
  data() {
    return {
      list: []
    };
  },

  methods: {
    deleteRelation(item) {
      let me = this;
      uni.showModal({
        title: '是否确定删除?',
        confirmText: '删除',
        success(e) {
          if (e.confirm) {
            me.list = me.list.filter(r => r.RowId != item.RowId);
          }
        }
      });
    },

    onPickerChange(e, item, list, id, name, pickerIndex) {
      let selected = e[0];
      if (!selected.value && !selected.label) {
        if (this.metadata[list].length > 0) {
          selected = {
            label: this.metadata[list][0].Value,
            value: this.metadata[list][0].Key
          };
        } else {
          return false;
        }
      }
      item[id] = selected.value;
      item[name] = selected.label;
      item[pickerIndex] = this.metadata[list].findIndex(a => a.Key == selected.value);
    },

    initRelations(data) {
      if (data) {
        this.list = data;
        this.list.forEach(item => {
          let directorIndex = -1;
          let salseIndex = -1;
          let dealerTerminalIndex = -1;
          let teamIndex = -1;
          let seniorDealerTerminalIndex = -1;
          let dealerDivisionIndex = -1;
          let regionalDirectorIndex = -1;
          let salesServiceIndex = -1;

          if (this.metadata.DirectorList) {
            directorIndex = this.metadata.DirectorList.findIndex(i => item.DirectorManagerId == i.Key);
          }
          if (this.metadata.SalseList) {
            salseIndex = this.metadata.SalseList.findIndex(i => item.SalseManagerId == i.Key);
          }
          if (this.metadata.DealerTerminalList) {
            dealerTerminalIndex = this.metadata.DealerTerminalList.findIndex(
              i => item.DealerTerminalManagerId == i.Key
            );
          }
          if (this.metadata.TeamList) {
            teamIndex = this.metadata.TeamList.findIndex(i => item.TeamLeaderManagerId == i.Key);
          }
          if (this.metadata.SeniorDealerTerminalList) {
            seniorDealerTerminalIndex = this.metadata.SeniorDealerTerminalList.findIndex(
              i => item.SeniorDealerTerminalManagerId == i.Key
            );
          }
          if (this.metadata.DealerDivisionList) {
            dealerDivisionIndex = this.metadata.DealerDivisionList.findIndex(
              i => item.DealerDivisionManagerId == i.Key
            );
          }
          if (this.metadata.RegionalDirectorList) {
            regionalDirectorIndex = this.metadata.RegionalDirectorList.findIndex(
              i => item.RegionalDirectorManagerId == i.Key
            );
          }
          if (this.metadata.SalesServiceList) {
            salesServiceIndex = this.metadata.SalesServiceList.findIndex(i => item.SalesServiceManagerId == i.Key);
          }

          this.$set(item, 'directorIndex', directorIndex);
          this.$set(item, 'salseIndex', salseIndex);
          this.$set(item, 'dealerTerminalIndex', dealerTerminalIndex);
          this.$set(item, 'teamIndex', dealerTerminalIndex);
          this.$set(item, 'seniorDealerTerminalIndex', dealerTerminalIndex);
          this.$set(item, 'dealerDivisionIndex', dealerTerminalIndex);
          this.$set(item, 'regionalDirectorIndex', dealerTerminalIndex);
          this.$set(item, 'salesServiceIndex', dealerTerminalIndex);

          this.$set(item, 'showDirectorPicker', false);
          this.$set(item, 'showSalsePicker', false);
          this.$set(item, 'showDealerTerminalPicker', false);
          this.$set(item, 'showTeamPicker', false);
          this.$set(item, 'showSeniorDealerTerminalPicker', false);
          this.$set(item, 'showDealerDivisionPicker', false);
          this.$set(item, 'showRegionalDirectorPicker', false);
          this.$set(item, 'showSalesServicePicker', false);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.relation-item {
  margin-bottom: 60rpx;
}
</style>
